import React from 'react';
import { Result, Button } from 'antd';
import { useRouter } from 'next/router';
import { HomeOutlined, ReloadOutlined } from '@ant-design/icons';

const ServerErrorPage: React.FC = () => {
  const router = useRouter();

  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: '#f0f2f5'
    }}>
      <Result
        status="500"
        title="500"
        subTitle="抱歉，服务器出现错误。"
        extra={[
          <Button 
            type="primary" 
            icon={<HomeOutlined />}
            onClick={() => router.push('/')}
            key="home"
          >
            返回首页
          </Button>,
          <Button 
            icon={<ReloadOutlined />}
            onClick={() => window.location.reload()}
            key="reload"
          >
            重新加载
          </Button>
        ]}
      />
    </div>
  );
};

export default ServerErrorPage;